<template>
  <div class="page_padding out_main">
    <div class="notice_con">
      <div class="view-page">
        <div class="operate">
          <div class="select-box">
            <div class="list_choose_time" @click="statusChoose(chooseStatus)">
              {{ chooseStatus || '会议状态' }}
              <span></span>
            </div>
            <div class="list_choose_time" @click="timeChoose(chooseTime)">
              {{ chooseTime || '会议时间' }}
              <van-icon name="close" v-if="chooseTime" @click.stop="clearTime" />
              <span></span>
            </div>
          </div>
          <div class="search-box">
            <van-search
              v-model="searchContent"
              show-action
              placeholder="请输入会议主题或地点"
              @search="onSearch"
              shape="round"
              background="#f4f6f8"
              :clearable="false"
              class="search-input">
              <template #action>
                <div @click="onSearch">搜索</div>
              </template>
              <template #right-icon>
                <van-icon name="close" @click.stop="clearSearch" v-if="searchContent" />
              </template>
            </van-search>
          </div>
        </div>
        <div class="list_con">
          <van-list
            v-model="loading"
            :finished="finished"
            :finished-text="listDate.length > 0 ? '没有更多了' : ''"
            @load="getData"
            :offset="300"
            :immediate-check="true">
            <div class="list_box" v-if="listDate.length > 0">
              <div class="list_info" @click="goDetail(item)" v-for="item in listDate" :key="item.id">
                <div class="info-left">
                  <div class="info-name pre_line">
                    {{ item.meetingName }}
                  </div>
                  <!-- <div class="info-time">{{ item.meetingTime.includes('null') ? '' : item.meetingTime }}</div> -->
                  <div class="info-time">{{ getTime(item.meetingTime) }}</div>
                  <!-- <div class="info-place">参会人员：{{ item.participants }}</div> -->
                </div>
                <div class="info-right">
                  <div class="info-status right1" v-if="item.meetingStatus === '1'">待审批</div>
                  <div class="info-status right1" v-if="item.meetingStatus === '2'">未开始</div>
                  <div class="info-status right2" v-if="item.meetingStatus === '3'">进行中</div>
                  <div class="info-status right3" v-if="item.meetingStatus === '4'">已结束</div>
                  <div class="info-status right4" v-if="item.meetingStatus === '5'">已取消</div>
                  <div class="info-operate" v-else>
                    <template v-if="item.meetingStatus === '0'">
                      <van-button type="info" size="mini" @click.stop="editMeet(item)">编辑会议</van-button>
                      <van-button type="info" size="mini" @click.stop="deleteMeet(item)">删除会议</van-button>
                    </template>
                    <van-button
                      type="info"
                      size="mini"
                      @click.stop="cancleMeet(item)"
                      v-if="['1', '2'].includes(item.meetingStatus) && item.createBy === userInfo.userId">
                      取消会议
                    </van-button>
                    <van-button
                      type="info"
                      size="mini"
                      @click.stop="approveMeet(item)"
                      v-if="
                        ['1'].includes(item.meetingStatus) &&
                        (isOrgRole || isPartRole) &&
                        item.createBy !== userInfo.userId
                      ">
                      审批会议
                    </van-button>
                  </div>
                </div>
              </div>
            </div>
            <van-empty v-else description="暂无数据" />
          </van-list>
        </div>
        <div class="addNew" @click="goAdd" v-if="isNormalRole || isOtherRole || isOrgRole">
          <img src="@/assets/images/common/add_new.png" alt="" />
        </div>
        <van-calendar
          :allow-same-day="true"
          v-model="showTime"
          type="range"
          @confirm="onConfirm"
          color="#3a84ee"
          :min-date="minDate" />

        <van-popup class="popu_picker" v-model="showTypes" position="bottom">
          <van-picker
            show-toolbar
            visible-item-count="4"
            :columns="statusOptions"
            default-index="0"
            @cancel="showTypes = false"
            @confirm="onConfirmY" />
        </van-popup>
      </div>
    </div>
  </div>
</template>

<script>
import { getlistMeetingPages, cancelMeeting, delMeeting } from '@api/api-meet.js'
import moment from 'moment'
import { mapGetters } from 'vuex'
export default {
  name: 'ViewPage',
  components: {},
  props: {
    operateType: String,
  },
  filters: {},
  data() {
    return {
      tablePage: {
        currentPage: 1,
        pageSize: 10,
        totalResult: 0,
      },
      userInfo: JSON.parse(localStorage.userInfo),
      timeL: [],
      chooseTime: '',
      statusOptions: [
        {
          value: '',
          text: '全部',
        },
        {
          value: '1',
          text: '待审批',
        },
        {
          value: '2',
          text: '未开始',
        },
        {
          value: '3',
          text: '进行中',
        },
        {
          value: '4',
          text: '已结束',
        },
        {
          value: '5',
          text: '已取消',
        },
      ],
      statusData: '',
      chooseStatus: '全部',
      listDate: [],
      loading: false,
      finished: false,
      showTime: false,
      showTypes: false,
      searchContent: '',
      minDate: new Date(2023, 0, 1),
    }
  },
  computed: {
    ...mapGetters('role', ['isOtherRole', 'isNormalRole', 'isOrgRole', 'isPartRole']),
  },
  watch: {},
  created() {},
  mounted() {},
  methods: {
    getData() {
      this.getlistMeetingPages()
    },
    // 获取数据列表
    getlistMeetingPages() {
      this.loading = true
      const param = {
        startTime: this.timeL[0] || '',
        endTime: this.timeL[1] || '',
        fuzzyQuery: this.searchContent,
        meetingStatus: this.statusData,
        current: this.tablePage.currentPage,
        size: this.tablePage.pageSize,
        tenantId: localStorage.tenantId,
      }
      getlistMeetingPages(param).then(res => {
        if (res.code === 0) {
          this.listDate.push(...res.data.records)
          this.tablePage.currentPage++
          this.tablePage.totalResult = res.data.total
          this.loading = false
          if (this.listDate.length === this.tablePage.totalResult) {
            this.finished = true
          }
        }
      })
    },
    // 登记列表跳转详情
    goDetail(item) {
      this.$router.push({
        path: '/meetDetail',
        query: {
          id: item.id,
          operateType: 'detail',
        },
      })
    },
    // 选择时间
    timeChoose(time) {
      this.showTime = true
    },
    // 时间确定
    onConfirm(val) {
      this.showTime = false
      const time1 = moment(val[0]).format('YYYY-MM-DD')
      const time2 = moment(val[1]).format('YYYY-MM-DD')
      this.timeL = [time1, time2]
      this.chooseTime = time1 + ' 至 ' + time2
      this.resizeList()
    },
    resizeList() {
      this.tablePage.currentPage = 1
      this.listDate = []
      this.finished = false
      this.getData()
    },

    onConfirmY(val) {
      this.showTypes = false
      this.chooseStatus = val.text
      this.statusData = val.value
      this.resizeList()
    },
    statusChoose() {
      this.showTypes = true
    },
    cancleMeet(row) {
      this.$dialog
        .confirm({
          title: '提示',
          message: '确定要取消会议?',
        })
        .then(() => {
          cancelMeeting({ id: row.id }).then(res => {
            this.resizeList()
          })
        })
        .catch(() => {})
    },
    deleteMeet(row) {
      this.$dialog
        .confirm({
          title: '提示',
          message: '确定要删除会议？',
        })
        .then(() => {
          delMeeting({ id: row.id }).then(res => {
            this.resizeList()
          })
        })
        .catch(() => {})
    },
    editMeet(row) {
      this.$router.push({
        path: '/meetAdd',
        query: {
          operateType: 'edit',
          id: row.id,
        },
      })
    },
    approveMeet(row) {
      this.$router.push({
        path: '/meetAdd',
        query: {
          operateType: 'approve',
          id: row.id,
        },
      })
    },
    goAdd() {
      this.$router.push({
        path: '/meetAdd',
        query: {
          operateType: 'add',
        },
      })
    },
    onSearch() {
      this.resizeList()
    },
    clearTime() {
      this.chooseTime = ''
      this.timeL = []
      this.resizeList()
    },
    clearSearch() {
      this.searchContent = ''
      this.resizeList()
    },
    getTime(time) {
      if (!time || time.includes('null')) {
        return ''
      } else {
        const arr = time.split('~')
        const arr1 = arr[0].split(' ')
        const arr2 = arr[1].split(' ')
        if (arr1[0] === arr2[0]) {
          return arr1[0] + ' ' + arr1[1] + '--' + arr2[1]
        } else {
          return time
        }
      }
    },
  },
}
</script>

<style lang="scss" scoped>
.out_main {
  padding-top: 0 !important;
}
.notice_con {
  padding: 3px 0 10px;
  width: 100%;
  height: 100%;
  .view-page {
    font-size: 14px;
    color: #333333;
    /deep/ .van-popup {
      position: absolute;
    }
    /deep/ .van-overlay {
      position: absolute;
    }
    .operate {
      line-height: 33px;
      background-color: #ffffff;
      padding: 10px 20px;
      border-bottom: 1px solid #efefef;
      .search-box {
        margin-top: 5px;
      }
      .select-box,
      .search-box {
        display: flex;
        flex-direction: row;
        justify-content: space-around;
        align-items: center;
      }
      .select-box {
        .list_choose_time {
          display: flex;
          align-items: center;
          margin: 0 12px;
          min-width: 25%;
          justify-content: center;
          span {
            width: 0;
            height: 0;
            border-top: 4px solid #dcdee0;
            border-left: 4px solid transparent;
            border-right: 4px solid transparent;
            margin-left: 4px;
          }
          .van-icon-close {
            margin-left: 10px;
            font-size: 16px;
          }
        }
      }
      .search-box {
        .search-input {
          background: #f8f8f8;
          border-radius: 15px;
          padding-left: 10px;
          padding-right: 10px;
          flex: 1;
          /deep/.van-button {
            background-color: #f8f8f8;
            color: #204dc2;
            padding-left: 0;
          }
        }
      }
    }

    .list_con {
      padding: 7px 10px;
      font-size: 14px;
      .list_info {
        padding: 7px;
        border-bottom: 1px solid #efefef;
        display: flex;
        align-items: center;
        justify-content: space-between;
        .info-left {
          .info-name {
            font-weight: 600;
            font-size: 15px;
            overflow: hidden;
            text-overflow: ellipsis;
            display: -webkit-box;
            -webkit-box-orient: vertical;
            -webkit-line-clamp: 2;
            .word_tip {
              padding: 0 10px;
              background-color: #d9001b;
              color: #ffffff;
              font-size: 12px;
              border-radius: 5px;
            }
          }
          .info-time {
            margin: 6px 0;
          }
          .info-place {
            overflow: hidden;
            text-overflow: ellipsis;
            display: -webkit-box;
            -webkit-box-orient: vertical;
            -webkit-line-clamp: 2;
          }
        }
        .info-right {
          text-align: center;
          width: 75px;
          min-width: 75px;
          .info-operate {
            .van-button {
              margin: 5px 0;
            }
          }
        }
      }
    }
    .addNew {
      position: fixed;
      left: 50%;
      transform: translateX(-50%);
      bottom: 50px;
      width: 48px;
      height: 48px;
      img {
        width: 100%;
        opacity: 0.7;
      }
    }
  }
}
</style>
